import { Form } from 'antd';
import { ModelerService } from '@/pages/workflow/model/components/modeler/ModelerService';
import { useEffect } from 'react';
import { GSelect } from 'geminis-react';

export const Candidate = (props: { modelerService: ModelerService }) => {
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue({
      role: props.modelerService?.businessObject?.$attrs[
        props.modelerService?.is(['bpmn:Process'])
          ? 'flowable:candidateStarterGroups'
          : 'flowable:candidateGroups'
      ],
    });
  }, [props.modelerService.element]);

  return (
    <Form layout="vertical" form={form}>
      <Form.Item label="角色" name="role">
        <GSelect
          url="/api/resources/role"
          fieldNames={{
            value: 'name',
          }}
          onChange={(event) => {
            props.modelerService.setProperty(
              props.modelerService?.is(['bpmn:Process'])
                ? 'flowable:candidateStarterGroups'
                : 'flowable:candidateGroups',
              event,
            );
          }}
        />
      </Form.Item>
    </Form>
  );
};
